import React, { useEffect, useState } from "react";
import { Card, Grid2, Stack, CardContent, Typography, LinearProgress, Chip, Avatar,
  Accordion, AccordionSummary, AccordionDetails 
} from "@mui/material";
import { EmojiEvents, Star, Map, Refresh, ExpandMore } from "@mui/icons-material";
import { RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, Tooltip } from "recharts";
import ContentContainer from "../components/ContentContainer";
import {textbookService} from "../service/textbookService";
import { useDailyProgress } from "../hook/journeyHook";
import { quizService } from "../service/quizService";
import quizHistoryService from "../service/quizHistoryService";

const dummyStats = [
  { skill: "管理学原理", value: 85 },
  { skill: "企业战略管理", value: 70 },
  { skill: "市场营销", value: 50 },
  { skill: "财务管理", value: 30 }
];

const LearningJourneyPage = () => {

  const [chapters, setChapters] = useState({});
  const dailyCounts = useDailyProgress();

  useEffect(() => {
    textbookService.getChaptersByBook().then(response => {
      setChapters(response);
      console.log('Fetched chapters by book:', response);
    }).catch(error => {
      console.error('Error fetching chapters:', error);
    });
    // quizHistoryService.syncHistory();
  }, []);

  return (
    <ContentContainer>
      <Stack spacing={2}>
        {/* 每日挑战任务 */}
        <Card className="shadow-md">
          <CardContent>
            <Typography variant="h6">🔥 每日挑战</Typography>
            <Typography className="mt-1">今日已完成 {dailyCounts} / 20 题</Typography>
            <LinearProgress variant="determinate" value={dailyCounts / 20 * 100} className="mt-2" />
          </CardContent>
        </Card>
        {Object.keys(chapters).map((book, index) => (
            <Accordion key={index}>
              <AccordionSummary
                expandIcon={<ExpandMore />}
                aria-controls={`panel${index}-content`}
                id={`panel${index}-header`}>
                <Typography variant="h6">{book}</Typography>
              </AccordionSummary>
              <AccordionDetails>
                <Stack spacing={1}>
                  {chapters[book].map((chapter, idx) => (
                    <Typography key={idx}>{chapter}</Typography>
                  ))}
                </Stack>
              </AccordionDetails>
            </Accordion>
          )
        )}
        {/* 等级与经验值 */}
        <Card className="shadow-md" variant="outlined">
          <CardContent>
            <Typography variant="h6">🎯 当前等级</Typography>
            <Grid2 container alignItems="center" spacing={2} className="mt-2">
              <Grid2 item>
                <Avatar sx={{ bgcolor: "primary.main", width: 56, height: 56 }}>5</Avatar>
              </Grid2>
              <Grid2 item xs>
                <Typography>经验值：1200 / 1500</Typography>
                <LinearProgress variant="determinate" value={80} />
              </Grid2>
            </Grid2>
          </CardContent>
        </Card>

        {/* 技能熟练度图（雷达图） */}
        <Card className="shadow-md">
          <CardContent>
            <Typography variant="h6">📊 技能熟练度图</Typography>
            <Grid2 justifyContent="center">
              <RadarChart outerRadius={90} width={300} height={250} data={dummyStats}>
                <PolarGrid />
                <PolarAngleAxis dataKey="skill" />
                <PolarRadiusAxis angle={30} domain={[0, 100]} />
                <Radar name="熟练度" dataKey="value" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
                <Tooltip />
              </RadarChart>
            </Grid2>
          </CardContent>
        </Card>
        {/* 知识地图 */}
        <Card className="shadow-md">
          <CardContent>
            <Typography variant="h6">🗺️ 知识地图</Typography>
            <Grid2 container spacing={1} className="mt-2">
              {dummyStats.map((item, idx) => (
                <Grid2 item key={idx}>
                  <Chip icon={<Map />} label={item.skill} color="primary" />
                </Grid2>
              ))}
            </Grid2>
          </CardContent>
        </Card>

        {/* 成就徽章 */}
        <Card className="shadow-md">
          <CardContent>
            <Typography variant="h6">🏆 成就徽章</Typography>
            <Grid2 container spacing={1} className="mt-2">
              <Chip icon={<EmojiEvents />} label="连续答对5题" color="success" />
              <Chip icon={<Star />} label="掌握3章" color="warning" />
            </Grid2>
          </CardContent>
        </Card>

        {/* 遗忘提醒（复习提示） */}
        <Card className="shadow-md">
          <CardContent>
            <Typography variant="h6">⏳ 遗忘提醒</Typography>
            <Chip icon={<Refresh />} label="3道题需要复习" color="error" className="mt-2" />
          </CardContent>
        </Card>

      </Stack>
    </ContentContainer>
  )
};

export default LearningJourneyPage;
